<template>
  <el-container>
    <el-header style="padding:0">
      <el-menu
        mode="horizontal"
        background-color="#333744"
        text-color="#EBEEF5"
        active-text-color="#EBEEF5"
      >
        <!-- 中间标题 -->
        <span
          style="position: absolute;padding-top: 15px;left:40%;font-size: 25px; font-weight: bold;color: #fff"
        >
          课程信息管理系统</span
        >
        <!-- 右侧个人菜单 -->
        <el-submenu style="float:right" index="null">
          <template slot="title">
            <!-- <i
              class="el-icon-user"
              style="float:left;font-size:3em;padding-top:0.2em;margin-right:23px"
            ></i> -->
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="large" style="margin-right:13px"></el-avatar>
            <label style="font-size:1.3em" >你好，{{ user }}</label></template
          >
          <!-- 菜单内容及其选中执行方法 PersonalNav为子菜单，func()为点击执行的函数 -->
          <el-menu-item
            v-for="(item, i) in PersonalNav"
            :key="i"
            :index="null"
            :disabled="item.disabled"
            @click="item.func()"
          >
            <i :class="item.icon"></i>{{ item.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
  </el-container>
</template>

<script>
export default {
  name: "topBarTemplate",
  data() {
    return {
      user: "学生1",
      PersonalNav: [
        {
          name: "个人设置",
          func: () => {
            console.log("个人设置");
          },
          icon: "el-icon-setting",
          disabled: false,
        },
        {
          name: "退出登录",
          func: () => {
            console.log("退出登录");
          },
          icon: "el-icon-switch-button",
          disabled: false,
        },
        {
          name: "其他",
          func: () => {
            console.log("其他");
          },
          icon: "el-icon-sunny",
          disabled: true,
        },
      ],
    };
  },
};
</script>

